<template>
  <el-row :gutter="20" class="physical-model">
    <el-col :span="5" class="model-wrap">
      <div class="content-box-left">
        <div class="title">目标抽取分类</div>
        <el-tabs
          @tab-click="getList"
          :tab-position="tabPosition"
          class="tab-wrap"
          v-model="queryParams.modelId"
        >
          <el-tab-pane
            v-for="(menu, index) in menuList"
            :key="index"
            :label="menu.modelName"
            :name="menu.id"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
    <el-col :span="19" class="model-wrap">
      <div class="content-box">
        <SearchComp
          :searchForm="searchForm"
          :searchData="searchData"
          :searchAction="searchAction"
        ></SearchComp>
        <TableComp
          ref="multipleTable"
          :tableData="tableData"
          :tableConfig="tableConfig"
          :tableAction="tableAction"
          :isSelect="false"
          :isIndex="true"
          :isShowPage="true"
          :queryParams="queryParams"
          @getPagination="getList"
          ><template v-slot:status="scope">
            <template v-if="scope.row.status === 0">
              <i class="little-circle-info"></i>
              未开始
            </template>
            <template v-else-if="scope.row.status === 1">
              <i class="little-circle-primary"></i>
              进行中
            </template>
            <template v-else-if="scope.row.status === 2">
              <i class="little-circle-warn"></i>
              已暂停
            </template>
            <template v-else-if="scope.row.status === 3">
              <span style="cursor: pointer" @click="showException(scope.row)">
                <i class="little-circle-danger"></i>
                任务异常
              </span>
            </template>
            <template v-else-if="scope.row.status === 4">
              <i class="little-circle-success"></i>
              已完成
            </template></template
          ></TableComp
        >
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: "left",
      menuList: [],
      tableData: [],
      queryParams: {
        modelId: null,
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableAction: {
        align: () => "center",
        width: () => String(60 * 2),
        operations: [
          {
            label: "查看",
            isLink: true,
            type: "primary",
            method: (row) => {
              this.$router.push({
                path: `/knowledgeGeneration/extractType/taskDetail/${row.extractionTaskName}/${this.queryParams.modelId}/${row.id}`,
              });
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.delTask([row.id]);
            },
          },
        ],
      },
      searchData: {
        file_name: "",
      },
      searchForm: {
        changeMethod: () => this.getList(),
        formData: [
          {
            type: "Input",
            label: "任务名称",
            prop: "file_name",
            clearable: true,
            icon: "el-icon-search",
            placeholder: "请输入",
          },
        ],
      },
      searchAction: [
        {
          label: "查询",
          type: "primary",
          handle: () => {
            this.getList();
          },
        },
        {
          label: "重置",
          type: "primary",
          plain: true,
          handle: () => {
            this.searchData = {
              file_name: "",
            };
            this.getList();
          },
        },
      ],
      tableConfig: [
        {
          prop: "extractionTaskName",
          label: "抽取任务名称",
        },
        {
          prop: "extractionModelName",
          label: "抽取模型",
        },
        {
          prop: "contentNumber",
          label: "内容数量",
        },

        {
          prop: "status",
          label: "状态",
          isSlot: true,
        },
      ],
    };
  },
  created() {
    this.getExtractModel();
  },
  methods: {
    getExtractModel() {
      this.$api.knowledgeGeneration.getExtractModel().then((res) => {
        const { code, data, message } = res.data;
        if (code !== 200) {
          console.error(res);
          this.$message.error(message);
          return;
        }
        // 取modelType 7 图片抽取 8 csv抽取
        this.menuList = data
          .filter((item) => {
            return item.modelType == 7 || item.modelType == 8;
          })
          .sort((a, b) => {
            // 左侧分类按id 升序排列
            return a.id - b.id;
          });
        // 默认第一个抽取分类
        this.queryParams.modelId = this.menuList ? this.menuList[0].id : null;
        this.getList();
      });
    },
    getList() {
      let params = {
        file_name: this.searchData.file_name,
        page_index: this.queryParams.currentPage,
        page_size: this.queryParams.pageSize,
        extraction_model_id: this.queryParams.modelId,
      };
      this.$api.knowledgeGeneration
        .getExtractTaskList(params)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.tableData = data.list;
            this.queryParams.total = data.total;
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 删除
    delTask(row) {
      this.$confirm("此操作将删除此数据，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.knowledgeGeneration
          .delExtractTask({ id: row.id })
          .then((res) => {
            const { data, message, code } = res.data;
            if (code === 200) {
              this.getList();
              this.$message.success(message);
            } else {
              this.$message.warning(message);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.physical-model {
  // width: 100%;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.model-wrap {
  height: 100%;
  .content-box-left {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    background-color: #fff;
    position: relative;
    .title {
      font-weight: bold;
      font-size: 16px;
    }
    .tab-wrap {
      position: absolute;
      right: -10px;
      top: 60px;
      :deep(.el-tabs__item) {
        padding: 0 100px;
        // margin: 15px 0;
        display: flex;
        justify-content: flex-start;
        height: 50px;
        align-items: center;
      }
    }
  }
  .content-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }
}

.model-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.model-info {
  flex: 1;
  overflow: hidden;
}
</style>
